<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            *{
                margin: 0;
                padding: 0;
            }
            #form{
                margin:30px auto;
                width: 500px;
                border: 1px solid #ccc;
            }
            #form h1{
                text-align: center;
            }
            #form p{
                display: flex;
            }
            #form p span{
                display:inline-block;
                width: 200px;
                
                line-height: 36px;
                text-align: right;
            }
            /* #form p input{
                height: 18px;
            } */
            #form #reset{
                margin-left: 200px;
                margin-right: 20px;
                margin-bottom: 20px;
            }
            #form #reset{
                margin-left: 220px;
                margin-bottom: 20px;
            }
            #txt{
                color: #000;
                
            }
        </style>
</head>
<body>
        <form action="" id="form">
                <h1>注册表单</h1>
                <p><span>QQ：</span><input type="text" name="" id="qq"><span id="txt"></span></p>
                <p><span>手机：</span><input type="text" name="" id="phone"><span id="txt"></span></p>
                <p><span>邮箱：</span><input type="text" name="" id="email"><span id="txt"></span></p>
                <p><span>座机：</span><input type="text" name="" id="hao"><span id="txt"></span></p>
                <p><span>姓名：</span><input type="text" name="" id="name"><span id="txt"></span></p>
                <input type="reset" value="重置" id="reset">
                <input type="submit" value="提交" id="submit">
            </form>
            <script>
                function $(e){
                    return document.querySelector(e);
                }
                var reg1=/^[1-9]\d{6,10}$/;
                var reg2=/^[1-9]\d{10}$/;
                var reg3=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
                var reg4=/^((0\d{2,3}-)|(\(0\d{2,3}\)))?([1-9]\d{6,7})$/;
                var reg5=/^[\u4E00-\u9FA5]{2,}$/
                function fun(ele ,reg){
                    ele.onkeyup=function(){
                        if(reg.test(this.value)){
                            $('#txt').innerText='正确';
                            $('#txt').style.color='green';
                        }else{
                            $('#txt').innerText='错误';
                            $('#txt').style.color='red';
                        }
                    }
                }
                $('#reset').onclick=function(){
                    $('#form').reset();
                }
                fun($('#qq'),reg1);
                fun($('#phone'),reg2);
                fun($('#email'),reg3);
                fun($('#hao'),reg3);
                fun($('#phone'),reg3);
                fun($('#hao'),reg4);
                fun($('#name'),reg5);

            </script>
</body>
</html>